<template>
	<view class="bg-white">
		<!-- 轮播图 -->
		<swiper class="screen-swiper round-dot" :indicator-dots="true" :circular="true" :autoplay="true" interval="5000"
		 duration="500">
			<swiper-item v-for="(item,index) in giftInfo.imgPath" :key="index">
				<image :src="item" mode="aspectFit"></image>
			</swiper-item>
		</swiper>
		<!-- 价格 -->
		<view>
			<view class="gift-title">
				<text class="gift-title-text">{{giftInfo.title}}</text>
			</view>
			<view class="shop-price">
				<text class="shop-price-text">{{giftInfo.scores}}</text>
				<text style="font-size: 35rpx;">积分</text>
			</view>
			
		</view>

		<!-- 请选择型号 -->
		<view class="attr-box" @tap="showModal" data-target="bottomModal" v-if="chooseAttrIndex==null">
			<view class="text-bold" style="padding-bottom: 5px;">请选择型号：</view>
			<text v-for="(item, index) in giftInfo.attr" :key="index" class="attr-text" v-if="index<=2">
				{{item}}
			</text>
		</view>
		<!-- 已选择型号 -->
		<view class="attr-box" @tap="showModal" data-target="bottomModal" v-else>
			<view class="text-bold" style="padding-bottom: 5px;">已选择：</view>
			<text class="attr-text">
				{{giftInfo.attr[chooseAttrIndex]}}
			</text>
		</view>
		<!-- 型号弹窗 -->
		<view class="cu-modal bottom-modal" :class="modalName=='bottomModal'?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white">
					<view class="action text-blue" @tap="hideModal">取消</view>
					<!-- <view class="action buy-btn" @click="buyGift" >兑换</view> -->
				</view>
				<view class="padding-xl bg-white">
					<view class="bg-white padding">
						<view class="grid margin-bottom text-center" :class="'col-3'">
							<view class="choose-attr-text bg-cyan" v-for="(item, index) in giftInfo.attr" :key="index" 
							:class="tmpChooseAttrIndex==index?'chose-attr-text':''" @click.stop="chooseAttr" :data-index="index">
								{{item}}
							</view>
						</view>
					</view>
				</view>
				<view class="cu-bar btn-group foot">
					<!-- 未选择属性，弹出选择框 -->
					<button class="cu-btn bg-blue shadow-blur round lg main-btn" @click="saveChooseAttr()">立即兑换</button>
				</view>
			</view>
		</view>
		<!-- 详情 -->
		<view class="desc-box">
			<view style="display: flex; flex-direction: column; padding-bottom: 50rpx;">
				<text style="font-size: 40rpx;">商品描述：</text>
				<text>领取地点：29楼行政运行部。暂不支持退换货。</text>
			</view>
			
			<text class="desc-box-text">{{giftInfo.desc}}</text>
			<view v-for="(item,index) in giftInfo.imgPath" :key="index">
				<image :src="item" mode="aspectFit"></image>
			</view>
		</view>
		<!-- 底部购买按钮 -->
		<view class="cu-bar btn-group foot">
			<!-- 未选择属性，弹出选择框 -->
			<button class="cu-btn bg-blue shadow-blur round lg main-btn" @tap="showModal" data-target="bottomModal">立即兑换</button>
		</view>
	</view>
</template>

<script>
	import utils from '@/common/utils.js';
	import buy from '@/common/changeScores.js';
	import shareMsg from '@/common/shareMessage.js';
	
	const app = getApp();
	const db = uniCloud.database();
	const _ = db.command;

	export default {
		data() {
			return {
				giftInfo: {},
				modalName: null,
				hasJoined: true,
				gift_id: '5ffd5e869fea3c0001812719',
				chooseAttrIndex: null,
				tmpChooseAttrIndex: null
			}
		},

		methods: {
			onShareAppMessage(){
				var pathList = getCurrentPages()
				var path = pathList[pathList.length - 1].route
				return shareMsg.shareMsg({
					title: "AIIT周边商城",
					path: path + '?gift_id=' + this.gift_id,
					imageUrl: ""
				})
			},
			onLoad: function(event) {
				if (!app.globalData.hasLogin) {
					uni.showModal({
						title: "请先登录",
						mask: true,
						success: (res) => {
							if(res.confirm){
								uni.switchTab({
									url:"/pages/profile/profile"
								})
							} else {
								uni.navigateBack({
									delta: 1
								})
							}
						}
					});
				}
				// TODO 判断云函数调用情况，数据没加载出来前显示加载中
				this.gift_id = event.id;
				uni.setNavigationBarTitle({
					title: event.title
				})
				this.loadInfo();
			},

			showModal(e) {
				this.modalName = e.currentTarget.dataset.target
			},
			hideModal(e) {
				this.modalName = null
			},

			loadInfo(e) {
				// 调用云函数来获取纪念品相关信息： 活动名、日期、图片、描述等
				db.collection('mall-gifts').doc(this.gift_id).get().then( res => {
					this.giftInfo = res.result.data[0];
				})
			},

			buyGift(e) {
				let userInfo = app.globalData.userInfo;
				utils.checkUserInfo()
					.then(() => {
						if (userInfo.balance >= this.giftInfo.scores) {
							uni.showModal({
								title: '确认兑换',
								content: '现有积分:' + userInfo.balance + '；将扣除积分:' + this.giftInfo.scores,
								complete: (res) => {
									if (res.confirm) {
										uni.showLoading({
											mask: true,
											title: '兑换ing'
										})
										buy.scoresChange(userInfo, this.giftInfo, 2)
										.then(() => {
											uni.hideLoading()
											uni.showModal({
												title: '兑换成功',
												content: '请前往29楼领取'
											})
										})
										.catch(err => {
											console.log(err)
										})
									}
								}
							})
						} else {
							uni.showToast({
								icon: 'none',
								title: 'Sorry,积分不足'
							})
						}
					})
					.catch(() => {
						uni.showModal({
							content: '请先完善个人信息',
							complete: (res) => {
								if (res.confirm) {
									uni.navigateTo({
										url: '/pages/profile/userDetail'
									})
								} else {
									uni.navigateBack({
										delta: 1
									})
								}
							}
						})
					})
			},

			// 选择框选择型号
			chooseAttr(e) {
				this.tmpChooseAttrIndex = e.currentTarget.dataset.index
			},
			// 保存选择
			saveChooseAttr(e) {
				this.chooseAttrIndex = this.tmpChooseAttrIndex
				this.giftInfo.AttrIndex = this.tmpChooseAttrIndex
				this.modalName = null
				this.buyGift()
			}

		}
	}
</script>

<style>
	.cu-dialog {
		position: relative;
		display: inline-block;
		vertical-align: middle;
		margin-left: auto;
		margin-right: auto;
		width: 680upx;
		max-width: 100%;
		background-color: #f8f8f8;
		border-radius: 10upx;
		overflow: hidden;
	}
	.padding-xl {
		padding: 50upx 50upx 130upx 50upx;
	}
	.screen-swiper {
		min-height: 575upx;
	}

	.grid {
		display: flex;
		flex-wrap: wrap;
	}

	.grid.col-3>view {
		width: 28%;
	}

	.shop-price {
		padding-top: 5rpx;
		font-size: 12px;
	}

	.shop-price-text {
		font-size: 25px;
		margin-left: 20px;
		padding: 5px 10px 5px 10px;
		color: red;
	}

	.gift-title {
		padding: 20rpx 20px 20rpx 20px;
		background-color: white;
	}

	.gift-title-text {
		font-size: 20px;
		/* font-weight: bold; */
	}

	.attr-box {
		padding: 20rpx 20px 20rpx;
		border-bottom: solid 5px #F1F1F1 ;
	}

	.attr-text {
		margin-right: 10px;
		padding: 2px 5px 2px 5px;
		background-color: #dfdfdf;
		border-radius: 5px;
	}

	.choose-attr-text {
		padding: 20rpx 0 20rpx 0;
		background-color: #edecf1;
		margin: 10rpx;
		border-radius: 5px;
		color: #000000;
	}
	
	.chose-attr-text {
		padding: 20rpx 0 20rpx 0;
		background-color: #F0A93F;
		margin: 10rpx;
		border-radius: 5px;
		font-weight: bold;
		color: #FFFFFF;
	}

	.desc-box {
		padding: 30rpx 20px 0 20px;
	}

	.desc-box-text {
		font-size: 15px;
	}

	.cu-bar.foot {
		position: fixed;
		width: 100%;
		bottom: 50rpx;
		z-index: 1024;
		box-shadow: 0 -1upx 6upx rgba(0, 0, 0, 0);
	}
	
	.buy-btn {
		background-color: #E18A07;
		color: #FFFFFF;
	}
</style>
